<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>15套毕业属性预览</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft YaHei", Arial, sans-serif; }
        .container { max-width: 700px; margin: 50px auto; padding: 30px; border: 1px solid #eee; border-radius: 12px; box-shadow: 0 3px 15px rgba(0,0,0,0.08); }
        h1 { text-align: center; margin-bottom: 30px; color: #2d3748; font-size: 24px; }
        .param-group { margin-bottom: 25px; }
        .param-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        label { font-weight: 600; color: #4a5568; font-size: 16px; }
        .base-info { font-size: 14px; color: #718096; }
        input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 16px; transition: all 0.3s; }
        input:focus { outline: none; border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,0.1); }
        input:read-only { background-color: #f7fafc; color: #2d3748; cursor: default; }
        .warning { color: #e53e3e; font-size: 14px; margin-top: 6px; display: none; }
        .total-limit { margin: 15px 0; padding: 12px; background: #fef7fb; border-radius: 6px; border-left: 3px solid #9f7aea; }
        .total-limit p { color: #4a5568; font-size: 14px; }
        .total-limit span { font-weight: bold; color: #9f7aea; }
        .result-section { margin-top: 35px; padding-top: 25px; border-top: 1px dashed #dee2e6; }
        .result-title { text-align: center; color: #2d3748; margin-bottom: 20px; font-size: 18px; }
        .result-card { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px; }
        .result-item { flex: 1; min-width: 180px; padding: 15px; background: #e8f4f8; border-radius: 8px; text-align: center; }
        .result-item h3 { color: #2d3748; font-size: 15px; margin-bottom: 8px; }
        .result-value { font-size: 22px; font-weight: bold; color: #4299e1; }
        .percent-sign { font-size: 16px; margin-left: 2px; }
    </style>
</head>
<body>
    <div class="container">
        <h1>15套毕业属性预览</h1>

        <!-- 附加属性总和限制提示 -->
        <div class="total-limit">
            <p>规则：<span>暴伤附加属性 + 暴防附加属性 ≤ 218.52%</span>，精准效果附加属性自动计算</p>
        </div>

        <!-- 暴伤参数 -->
        <div class="param-group">
            <div class="param-header">
                <label for="critDmgAdd">参数一：暴伤附加属性</label>
                <span class="base-info">基础固定属性：641.9%</span>
            </div>
            <input type="number" id="critDmgAdd" min="0" max="218.52" step="0.01" value="100" placeholder="输入0-218.52之间的数值">
            <div class="warning" id="critDmgWarning">⚠️ 数值超出范围或格式错误</div>
        </div>

        <!-- 暴防参数 -->
        <div class="param-group">
            <div class="param-header">
                <label for="critDefAdd">参数二：暴防附加属性</label>
                <span class="base-info">基础固定属性：446.7%</span>
            </div>
            <input type="number" id="critDefAdd" min="0" max="218.52" step="0.01" value="80" placeholder="输入0-218.52之间的数值">
            <div class="warning" id="critDefWarning">⚠️ 数值超出范围或格式错误</div>
            <div class="warning" id="totalAddWarning">⚠️ 暴伤附加+暴防附加超过218.52%</div>
        </div>

        <!-- 精准效果参数 -->
        <div class="param-group">
            <div class="param-header">
                <label for="preciseAdd">参数三：精准效果附加属性（自动计算）</label>
                <span class="base-info">基础固定属性：167.4%</span>
            </div>
            <input type="number" id="preciseAdd" readonly placeholder="自动计算中...">
        </div>

        <!-- 最终属性结果展示 -->
        <div class="result-section">
            <h2 class="result-title">最终属性总览（基础属性+附加属性）</h2>
            <div class="result-card">
                <div class="result-item">
                    <h3>最终暴伤</h3>
                    <div class="result-value" id="finalCritDmg"><span class="percent-sign">%</span></div>
                </div>
                <div class="result-item">
                    <h3>最终暴防</h3>
                    <div class="result-value" id="finalCritDef"><span class="percent-sign">%</span></div>
                </div>
                <div class="result-item">
                    <h3>最终精准效果</h3>
                    <div class="result-value" id="finalPrecise"><span class="percent-sign">%</span></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 基础属性常量
        const BASE_CRIT_DMG = 641.9;    // 暴伤基础属性
        const BASE_CRIT_DEF = 446.7;    // 暴防基础属性
        const BASE_PRECISE = 167.4;     // 精准效果基础属性
        const MAX_TOTAL_ADD = 218.52;   // 暴伤+暴防附加属性最大值

        // 获取DOM元素
        const critDmgAdd = document.getElementById('critDmgAdd');
        const critDefAdd = document.getElementById('critDefAdd');
        const preciseAdd = document.getElementById('preciseAdd');

        // 警告提示元素
        const critDmgWarning = document.getElementById('critDmgWarning');
        const critDefWarning = document.getElementById('critDefWarning');
        const totalAddWarning = document.getElementById('totalAddWarning');

        // 最终结果元素
        const finalCritDmg = document.getElementById('finalCritDmg');
        const finalCritDef = document.getElementById('finalCritDef');
        const finalPrecise = document.getElementById('finalPrecise');

        // 验证数值有效性
        function validateValue(value, element, warningElement) {
            const num = Number(value);
            // 验证是否为有效数字、是否在0-218.52范围内
            if (isNaN(num) || num < 0 || num > MAX_TOTAL_ADD || value === '') {
                element.style.borderColor = '#e53e3e';
                warningElement.style.display = 'block';
                return false;
            } else {
                element.style.borderColor = '#ddd';
                warningElement.style.display = 'none';
                return true;
            }
        }

        // 验证附加属性总和
        function validateTotalAdd(critDmgNum, critDefNum) {
            const total = critDmgNum + critDefNum;
            if (total > MAX_TOTAL_ADD) {
                critDmgAdd.style.borderColor = '#e53e3e';
                critDefAdd.style.borderColor = '#e53e3e';
                totalAddWarning.style.display = 'block';
                return false;
            } else {
                critDmgAdd.style.borderColor = '#ddd';
                critDefAdd.style.borderColor = '#ddd';
                totalAddWarning.style.display = 'none';
                return true;
            }
        }

        // 核心计算逻辑
        function calculate() {
            // 获取输入值并转为数字（默认0）
            const critDmgNum = Number(critDmgAdd.value) || 0;
            const critDefNum = Number(critDefAdd.value) || 0;

            // 验证两个输入参数
            const isDmgValid = validateValue(critDmgAdd.value, critDmgAdd, critDmgWarning);
            const isDefValid = validateValue(critDefAdd.value, critDefAdd, critDefWarning);
            const isTotalValid = validateTotalAdd(critDmgNum, critDefNum);

            // 若验证失败，清空结果
            if (!isDmgValid || !isDefValid || !isTotalValid) {
                preciseAdd.value = '';
                finalCritDmg.textContent = '';
                finalCritDef.textContent = '';
                finalPrecise.textContent = '';
                return;
            }

            // 计算精准效果附加属性：(218.52 - 暴伤附加 - 暴防附加) / 2.475
            const preciseAddNum = (MAX_TOTAL_ADD - critDmgNum - critDefNum) / 2.475;

            // 计算最终属性（基础属性+附加属性）
            const finalCritDmgNum = BASE_CRIT_DMG + critDmgNum;
            const finalCritDefNum = BASE_CRIT_DEF + critDefNum;
            const finalPreciseNum = BASE_PRECISE + preciseAddNum;

            // 更新UI（保留2位小数，确保显示精度）
            preciseAdd.value = preciseAddNum.toFixed(2);
            finalCritDmg.textContent = finalCritDmgNum.toFixed(2);
            finalCritDef.textContent = finalCritDefNum.toFixed(2);
            finalPrecise.textContent = finalPreciseNum.toFixed(2);
        }

        // 监听输入变化（输入、粘贴、失去焦点都触发）
        critDmgAdd.addEventListener('input', calculate);
        critDefAdd.addEventListener('input', calculate);
        critDmgAdd.addEventListener('change', calculate);
        critDefAdd.addEventListener('change', calculate);

        // 页面加载时初始化计算
        calculate();
    </script>
</body>
</html>